<script setup>
defineProps({
  logo: {
    type: String
  },
  name: {
    type: String
  },
  Hot_job: {
    type: String
  },
  Type: {
    type: String
  }
})
</script>

<template>
  <el-card shadow="hover">
    <a href="#" class="content">
      <img :src="logo" />
      <div class="content-text">
        <h4>{{ name }}</h4>
        <span>{{ Type }}</span>
      </div>
    </a>
    <template #footer>
      <el-space spacer="|">
        <el-tag type="danger">热招</el-tag>
        <p>{{ Hot_job }}</p>
      </el-space>
    </template>
  </el-card>
</template>

<style lang="scss" scoped>
.el-card {
  border-radius: 10px;
}

.content {
  display: flex;
  border-bottom: none;
  img {
    height: 50px;
    width: 50px;
    border-radius: 4px;
  }
  .content-text {
    margin-left: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    h4 {
      margin-bottom: 9px;
      color: #222;
      font-weight: 500;
    }
    span {
      display: inline-block;
      color: #666;
      padding: 0 8px;
      background: #f8f8f8;
      font-size: 13px;
      border-radius: 4px;
      // max-width: 80px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 22px;
    }
  }
}
</style>
